<template>
    <div>
        <div class="filter-container">
            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
            </el-date-picker>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品编码" v-model="listQuery.goodsNo" clearable>
            </el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品ID" v-model="listQuery.goodsId" clearable>
            </el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品名称" v-model="listQuery.name" clearable>
            </el-input>
           
            <el-button class="filter-item male" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button class="filter-item male" type="primary"  @click="exportClick">导出</el-button>
        </div>
         
        <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="100%">
            <!-- <el-table-column
                align="center"
                type="selection"
                width="40">
                </el-table-column> -->
            <el-table-column align="center" label="序号" width="85" type="index" >
            </el-table-column>
            <el-table-column align="center" label="入库时间">
                <template slot-scope="scope">
                <span class="text">{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品编码">
                <template slot-scope="scope">
                <span class="text">{{scope.row.goodsNo}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称">
                <template slot-scope="scope">
                <span class="text">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="ID">
                <template slot-scope="scope">
                <span class="text">{{scope.row.goodsId}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="单位">
                <template slot-scope="scope">
                <span class="text">{{scope.row.unit}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="窖藏号">
                <template slot-scope="scope">
                <span class="text">{{scope.row.inputNo}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.currentPage" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>
<script>
import { parseTime } from '../../api/time.js'
export default {
   data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        status: 1,
        goodsNo: '',
        startTime: '',
        endTime: '',
        name: '',
        currentPage: 1,
        pageSize: 10
      },
      dateRange: '',
      typeOptions: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    dateRange: function() {
      if (this.dateRange === null) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.dateRange[0])
        this.listQuery.endTime = parseTime(this.dateRange[1])
      }
    }
  },
  methods: {
    //导出
      exportClick(){
          this.$confirm('确认导出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
          this.exportIdsList();
          }).catch(() => {
          this.$message({
              type: 'info',
              message: '已取消'
          });          
          });
      },
      async exportIdsList(){
          let {data} = await this.$post({
              api:'/in/exportIdsList',
              data:{
                  goodsId: this.listQuery.goodsId,
                  goodsNo: this.listQuery.goodsNo,
                  name: this.listQuery.name
              }
          })
          if(data.code === 0){
              let urlstr = url+data.data.replace('static/','');
              window.location.href=urlstr;
          }
      },
     getList(){
      var that = this
      that.$post({
            api: "/in/getInComingList",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("entrustList",data)
        });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
     
    },
    handleRemove(row) {
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

